<template>
  <view class="address-container">
    <!-- 收货地址 -->
     <view v-if="isEmptyAddress" class="address-choose-box" >
       <button type="primary" size="mini" class="addressChooseButton" @click="chooseAddress">请选择收获地址</button>
     </view>
     <view v-else class="address-info-box" @click="chooseAddress()">
       <view class="row1">
         <view class="row1-left">
           <view class="username">收货人: <text>{{address.userName}}</text></view>
         </view>
         <view class="row1-right">
             <view class="phone">电话:<text>{{address.telNumber}}</text></view>
             <uni-icons type="arrow-right"></uni-icons>
         </view>
       </view>
       
       <view class="row2">
         <view class="row2-left">收获地址:</view>
         <view class="row2-right">{{AddressStr}}</view>
       </view>
     </view>
     
     <image src="/static/cart_border@2x.png" class="address-border"></image>
  </view>
</template>

<script>
  import { mapMutations,mapState,mapGetters } from 'vuex';
  export default {
    name:"my-address",
    data() {
      return {
        
      };
    },
 
    computed:{
      ...mapState('m_user',['address']),
      ...mapGetters('m_user',['AddressStr']),
      isEmptyAddress(){
        return Object.keys(this.address).length===0
      }
    },
    methods:{ 
      ...mapMutations('m_user',['updateAddress']),
    // 选择收货地址
    chooseAddress() {
     uni.chooseAddress({
       success: (res)=> {
       this.updateAddress(res)
       },
       fail:(res)=>{
         //TODO this.reAuth()
         console.log(res)
       }
     })
   },
  }
}
</script>

<style lang="scss">
  .address-container {
    
    .address-choose-box {
        height: 90px;
        line-height: 90px;
        text-align: center;      
    }
    .address-info-box {
       display: flex;
       flex-direction: column;
       justify-content: center;
       
      height: 90px;
      padding: 0 5px;
      font-size: 12px;
      
      .row1 {
        display: flex;
        justify-content: space-between;
        
        .row1-right {
          display: flex;
          align-items: center;
          .phone {
            margin-right: 5px;
          }
        }

      }
      .row2 {
        display: flex;
        margin-top: 10px;
        align-items: center;
        .row2-left {
          white-space: nowrap;
          margin-right: 5px;
        }
        
      }       
    }
    
    .address-border {
      display: block;
      width: 100%;
      height: 5px;
    }
  }
</style>